<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Md文件转DOC</title>
  <link rel="stylesheet" href="element-ui/theme-chalk/index.css" />
  <link rel="stylesheet" href="css/index.css" />
  <script src="vue/vue.js"></script>
  <script src="axios/axios.min.js"></script>
  <script src="element-ui/index.js"></script>
  <style>
    .el-row {
      margin-bottom: 10px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .upload-demo {
      width: 100%
    }
  </style>
</head>

<body>
  <div id="mainApp">
    <el-row type="flex" class="main-row" justify="center">
      <el-col :span="6">
        <h3>1：上传本地文件</h3>
      </el-col>
      <el-col :span="8">
        <h3>2：生成格式配置<i @click="opDz" class="el-icon-warning"></i></h3>
      </el-col>
      <el-col :span="6"class="btn-div-title">
        <h3>3：点击开始转换</h3>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="6">
        <el-upload class="upload-demo" ref="upload" drag action="upload" :auto-upload="false"
        :before-upload="beforeUpload" :on-success="handleSUccess" :headers="headers" :data="uploadData">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">文件拖拽或<em>点击上传</em>
          <!-- <div class="el-upload__tip" slot="tip">只能上传markdown格式文件，且不超过{{maxFielSize}}MB</div> -->
            </br>限制markdown格式，且小于{{maxFielSize}}MB
          </div>
        </el-upload>
      </el-col>
      <el-col :span="8">

        <!-- <el-select class="box-div" v-model="value" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
            :disabled="item.disabled">
          </el-option>
        </el-select> -->
        <el-form>
          <el-row :gutter="10">
            <el-col :span="8">类型</el-col>
            <el-col :span="4">字体</el-col>
            <el-col :span="4">粗细</el-col>
            <el-col :span="4">对齐</el-col>
          </el-row>
        </el-form>
        </el-form>
        <el-form ref="form" :model="uploadData">
          <!-- 正文-->
          <el-row :gutter="10">
          <el-col :span="8">
            <el-input v-model="uploadData.bodySize">
              <template slot="prepend">正文</template>
              <template slot="append">px</template>
            </el-input>
          </el-col>
          <el-col :span="4">
            <el-select placeholder="字体" v-model="uploadData.bodyFont">
              <el-option
                v-for="item in fonts"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select placeholder="加粗" v-model="uploadData.bodyWeight">
              <el-option
                v-for="item in weights"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select placeholder="对齐" v-model="uploadData.bodyAlign">
              <el-option
                v-for="item in aligns"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <!-- h1标题-->
        <el-row :gutter="10">
          <el-col :span="8">
            <el-input v-model="uploadData.h1Size">
              <template slot="prepend">#&nbsp;&nbsp;&nbsp;&nbsp;</template>
              <template slot="append">px</template>
            </el-input>
          </el-col>
          <el-col :span="4">
            <el-select placeholder="字体" v-model="uploadData.h1Font">
              <el-option
                v-for="item in fonts"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select placeholder="加粗" v-model="uploadData.h1Weight">
              <el-option
                v-for="item in weights"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select placeholder="对齐" v-model="uploadData.h1Align">
              <el-option
                v-for="item in aligns"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <!-- h2标题-->
        <el-row :gutter="10">
          <el-col :span="8">
            <el-input v-model="uploadData.h2Size">
              <template slot="prepend">##&nbsp;&nbsp;</template>
              <template slot="append">px</template>
            </el-input>
          </el-col>
          <el-col :span="4">
            <el-select placeholder="字体" v-model="uploadData.h2Font">
              <el-option
                v-for="item in fonts"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select placeholder="加粗" v-model="uploadData.h2Weight">
              <el-option
                v-for="item in weights"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select placeholder="对齐" v-model="uploadData.h2Align">
              <el-option
                v-for="item in aligns"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <!-- h3标题-->
        <el-row :gutter="10">
          <el-col :span="8">
            <el-input v-model="uploadData.h3Size">
              <template slot="prepend">###&nbsp;</template>
              <template slot="append">px</template>
            </el-input>
          </el-col>
          <el-col :span="4">
            <el-select placeholder="字体" v-model="uploadData.h3Font">
              <el-option
                v-for="item in fonts"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select placeholder="加粗" v-model="uploadData.h3Weight">
              <el-option
                v-for="item in weights"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select placeholder="对齐" v-model="uploadData.h3Align">
              <el-option
                v-for="item in aligns"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <!-- 图片样式-->
        <el-row :gutter="10">
          <el-col :span="8">
            <el-input v-model="uploadData.imgWidth">
              <template slot="prepend">图片</template>
              <template slot="append">%</template>
            </el-input>
          </el-col>
          <el-col :span="4">
            <el-select placeholder="对齐" v-model="uploadData.imgAlign">
              <el-option
                v-for="item in aligns"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <!-- 表格样式-->
        <el-row :gutter="10">
          <el-col :span="8">
            <el-input v-model="uploadData.tableWidth">
              <template slot="prepend">表格</template>
              <template slot="append">%</template>
            </el-input>
          </el-col>
          <el-col :span="4">
            <el-select placeholder="对齐" v-model="uploadData.tableAlign">
              <el-option
                v-for="item in aligns"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        </el-form>

      </el-col>
      <el-col :span="6" class="btn-div">

        <el-button type="danger" size="medium" :loading="loading" @click="convertTo"><i
            class="el-icon-upload el-icon--right"></i>开始转换</el-button>
      </el-col>
    </el-row>
    <!--对照表-->
    <el-dialog
    title="word→html(px)对照表"
    :visible.sync="dzVisible"
    width="30%">
    <img src="duizhao.png" style="width:100%" />
  </el-dialog>
  </div>
  <script type="text/javascript">
    var app = new Vue({
      el: "#mainApp",
      computed: {},
      data() {
        return {
          title: "deploy",
          loading: false,
          dzVisible: false,
          maxFielSize: 2,
          fonts: [{
            value: 'SimSun',
            label: '宋体'
          }, {
            value: 'SimHei',
            label: '黑体',
          }, {
            value: 'KaiTi',
            label: '楷体',
          }],
          aligns:[{
            value: 'left',
            label: '靠左'
          },{
            value: 'center',
            label: '居中'
          },{
            value: 'right',
            label: '靠右'
          }],
          weights:[{
            value: 'bold',
            label: '加粗'
          },{
            value: 'normal',
            label: '常规'
          }],
          headers:{
            //ContentType: 'charset=UTF-8'
          },
          configForm:{
            name:''
          },
          uploadData:{
            bodyFont: "SimSun",
            bodySize: "21.3",
            bodyAlign: "left",
            bodyWeight: 'normal',

            h1Font: "SimHei",
            h1Size: "28",
            h1Align: "left",
            h1Weight: 'normal',

            h2Font: "SimHei",
            h2Size: "24",
            h2Align: "center",
            h2Weight: 'normal',

            h3Font: "SimHei",
            h3Size: "21.3",
            h3Align: "center",
            h3Weight: 'normal',

            imgWidth: "50",
            imgAlign: "left",

            tableWidth: "100",
            tableAlign: "left",
          }
        };
      },
      created: function () {

      },
      methods: {
        beforeUpload(file){
          let extName = file.name.split('.').pop();
          extName = extName.toUpperCase()
          if(extName !== 'MD' && extName !== 'MARKDOWN'){
            this.loading = false
            this.$message.error('非markdown后缀!');  
            return false
          }
          const isLt2M = file.size / 1024 / 1024 < this.maxFielSize;
          if (!isLt2M) {  
            this.loading = false
            this.$message.error(`上传图片大小不能超过 ${this.maxFielSize}MB!`);  
            return false
          }
          return true
        },
        convertTo() {
          const files = this.$refs.upload.uploadFiles;
          if (files.length > 0) {
            this.loading = true
            this.$refs.upload.submit();
          }else{
            this.$message.error('请先选择文件！');  
          }
        },
        handleSUccess(response, file, fileList) {
          this.loading = false
          if (response.result) {
            this.$refs.upload.clearFiles();  
            this.$confirm('文件转换成功，是否下载'+response.result+'?', '提示', {
              confirmButtonText: '确定下载',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$message({
                type: 'success',
                message: '下载已发起'
              });
              this.download(response.dname, response.name)
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              });
            });
          }
        },
        download(dname, name){
          axios({
            method: 'get',
            url: 'download?name=' + name,
            responseType: 'blob',
          }).then((response) => {
            const url = window.URL.createObjectURL(new Blob([response.data]));
            const link = document.createElement('a');
            link.href = url;
            dname= dname.replace(".", "_");
            link.setAttribute('download', dname + '.doc');
            document.body.appendChild(link);
            link.click();
          });
        },
        opDz(){
          this.dzVisible = true
        }
      },
    });
  </script>
</body>

</html>